<template>
  <div class="bg-white px-3" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
    <!-- 标签页的内容 -->
    <!-- 高级搜索-->
    <button-search ref="buttonSearch" placeholder="请输入搜索内容" @search="searchEvent" :showSuperSearch="false">
      <!-- 会匹配和使用到slot name=left的插槽
      <template #left>
        <el-button type="danger" size="mini" @click="deleteALL">批量删除</el-button>
      </template> -->
      <!-- 高级搜索的表单 -->
      <!-- <template #form>
       表单
        <el-form inline ref="form" :model="form" label-width="70px">
          <el-form-item label="评价用户" class="mb-0">
            <el-input v-model="form.username" size="mini" placeholder="输入商品名称">

            </el-input>
          </el-form-item>
          <el-form-item label="评价类型" class="mb-0">
            <el-select v-model="form.type" style="height: 18px; line-height: 18px;" size="mini" placeholder="选择商品类型">
              <el-option label="区域一" value="shanghai">

              </el-option>
              <el-option label="区域二" value="beijing">

              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布时间" class="mb-0">
            <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" size="mini">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="info" size="mini" @click="searchEvent">搜索</el-button>
            <el-button size="mini" @click="clearSearch">清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </template> -->
    </button-search>

    <!-- 商品列表 -->
    <el-table :data="tableData" style="margin-top: 20px; background-color: antiquewhite; border: 1px;">

      <el-table-column type='selection' prop="name" align="center">
      </el-table-column>
      <el-table-column type="expand" width="45" style="position: flex; align-items: center;">
        <template slot-scope="scope">
          <div class="media">
            <img class="mr-3" :src="scope.row.user.avatar" alt="" style="width: 80px; height: 80px;border-radius:100%">
            <div class="media-body">
              <h5 class="mt-0 d-flex">{{ scope.row.user.username }}<small>{{ scope.row.review_time }}</small>
                <!-- 设置当评论为空，且不显示编辑时显示 -->
                <el-button v-if="!scope.row.extra && !textareaEdit" class="ml-auto" type='info' size='mini'
                  @click="textareaEdit = true">回复</el-button>
              </h5>
              {{ scope.row.review.data }}
              <!-- 评价内容：这是展开的第一段话 -->
              <div class="py-2">
                <img v-for="(item, index) in scope.row.review.image" :key="index" :src="item" alt=""
                  style="max-width: 80px;max-height: 80px;">
              </div>

              <div v-if="textareaEdit">
                <el-input type="textarea" v-model="textarea" placeholder="请输入回复内容" :rows="2" size="mini" class="mt-2">
                  <template slot="append">
                    <el-button type='primary' size='mini'>回复</el-button>
                  </template>
                </el-input>
                <div class="py-2">
                  <el-button class="ml-auto mr-2" type='success' size='mini'
                    @click="review(scope.row.id)">回复</el-button>
                  <el-button class="ml-auto" type='info' size='mini' @click="closeTextarea">取消</el-button>
                </div>
              </div>

              <!-- 如果客服恢复存在，才进行遍历 -->
              <div v-if="scope.row.extra">
                <div class="media mt-3 bg-light p-2 rounded" v-for="(item, index) in scope.row.extra" :key="index">
                  <div class="media-body">
                    <h6 class="mt-0 d-flex">客服
                      <!-- 需要把原本的评论内容传递过去item.data   -->
                      <!-- textareaEdit不存在才显示 -->
                      <el-button v-if="!textareaEdit" class="ml-auto" type='info' size='mini'
                        @click="openTextarea(item.data)">修改</el-button>
                    </h6>
                    {{ item.data }}
                  </div>
                </div>
              </div>

            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" align="center" width='50px'>
      </el-table-column>
      <el-table-column prop="value" label="商品" align="center" width='300px'>
        <template slot-scope="scope">
          <div class="media">
            <img :src="scope.row.goods_item.cover" style="width:60px; height:60px; margin-right: 3px;" alt="...">
            <div class="media-body">
              <p class="mt-0"> {{ scope.row.goods_item.title }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="order" label="评价信息" text-align="center" width='350px'>
        <template slot-scope="scope">
          <div class="media">
            <div class="d-flex flex-column">
              <p>用户名：{{ scope.row.user.username }}</p>
              <p>评分<el-rate v-model='scope.row.rating' disabled show-score score-template='{value}'></el-rate></p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="review_time" label="评价时间" align="center">
      </el-table-column>
      <el-table-column prop="status" label="是否显示" align="center">
        <template slot-scope="scope">
          <el-button size="mini" plain @click="changeStatus(scope.row)"
            :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '启用' : '禁用' }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 底部 -->
    <div style="height: 60px;">
      <el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
        style="bottom:0;left: 200px;right: 0; z-index: 100;">
        <!-- flex:1占剩余的所有空间 -->
        <div style="flex: 1;">
          <el-pagination :current-change="page.current" :page-sizes="page.sizes" :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </el-footer>
    </div>
  </div>
</template>
<script>
import buttonSearch from '@/components/common/button-search.vue';
import common from '@/common/mixins/common.js';
export default {
  name: 'CommentList',
  components: { buttonSearch },
  mixins: [common],
  inject: ['layout'],
  data() {
    return {
      preUrl: 'goods_comment',
      textarea: '',
      textareaEdit: false,
      // 是用来放置高级搜索的表单的
      // form: {
      //   username: '',
      //   type: '',
      //   time: ''
      // },
      tableData: [
        //   {
        //   id: 0,
        //   goods: {
        //     title: '商品标题',
        //     cover: require('@/assets/image.png'),
        //   },
        //   username: '用户名',
        //   star: 5,
        //   create_time: '1991-10-05 20:00:17',
        //   status: 1,
        // }
      ],
      title: '',

    };
  },
  created() {

  },
  methods: {
    getListResult(e) {
      this.tableData = e.list
    },
    // 点击修改弹出编辑框
    openTextarea(data) {
      this.textarea = data;
      this.textareaEdit = true;
    },
    // 回复评论
    review(id) {
      if (this.textarea === '') {
        this.$message.error('回复内容不能为空！');
        return;
      }
      this.layout.showLoading();

      this.$axios.post('/admin/goods_comment/review/' + id, {
        data: this.textarea
      }, {
        token: true
      }).then(() => {
        this.closeTextarea();
        this.$message({
          type: 'success',
          message: '回复成功!'
        });

        // 重新获取评论列表
        this.getList();
        this.layout.hideLoading();
      }).catch(() => {
        this.$message.error('回复失败，请稍后再试！');
        this.layout.hideLoading();
      })
    },
    // 取消回复
    closeTextarea() {
      this.textareaEdit = false;
      this.textarea = '';
    },
    // 批量删除
    // deleteALL() {
    //   this.$confirm('是否要删除这些项目?', '提示', {
    //     confirmButtonText: '删除',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.multipleSelection.forEach(item => {
    //       let index = this.tableData.findIndex(v => v.id == item.id)
    //       if (index !== -1) {
    //         this.tableData.splice(index, 1)
    //       }
    //     })
    //     this.multipleSelection = []
    //     this.$message({
    //       type: 'success',
    //       message: '删除成功!'
    //     });
    //   })
    // },

    // 用来加载数据，监听点的是哪一个tab
    handleClick() {
      // console.log(this.activeName);
    },

    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },

    // 修改状态
    changeStatus(item) {
      // 请求服务端修改状态代码：

      // 修改前端
      item.status = !item.status
      this.$message({
        message: item.status ? '启用成功' : '禁用成功',
        type: 'success',
        duration: 2000
      })
    },
    onSubmit() {
      console.log('submit!');
    },

    // 获取列表请求分页的url
    getListUrl() {
      return `/admin/${this.preUrl}/${this.page.current}?limit=${this.page.size}&title=${this.title}`;
    },
    searchEvent(e) {
      this.title = e
      this.getList()
    },
    clearSearch() {
      console.log('clearSearch!');

    }

  },
};
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>